<template>
  <div id="mapDown" style="width:100%;height:900px" />
</template>
<script>
export default {
  data() {
    return {
      mapDownEchart: null,
      beforeLevelInfo: {

      },
      currentMapPid: -1,
      currentOrigionMapPid: -1
    }
  },
  created() {
    this.$nextTick(() => {
      this.initMapDown()
    })
  },
  methods: {
    // 地址https://cdn-chiship.oss-cn-beijing.aliyuncs.com/geo/*********_full.json
    initMapDown() {
      this.mapDownEchart = this.$echarts.init(document.getElementById('mapDown'))
      var timeFn = null
      this.mapDownEchart.on('click', (params) => {
        clearTimeout(timeFn)
        // 由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
        timeFn = setTimeout(() => {
          this.loadMap(this.currentMapPid, params.name)
        }, 250)
      })
      this.mapDownEchart.on('dblclick', (params) => {
        // 当双击事件发生时，清除单击事件，仅响应双击事件
        clearTimeout(timeFn)
        // 此处加入返回上一级的地图
      })
      this.loadMap(-1, 'china')
    },
    loadMap(pid, name) {
      this.mapDownEchart.showLoading({ text: '正在加载数据' })
      const registerMap = name
      var geoCoordMap = []

      this.$store.dispatch('loadRegionGeoByPidAndName', { pid: this.currentMapPid, name: name }).then(geoJson => {
        this.currentMapPid = geoJson.pid
        geoJson.features.forEach(item => {
          var properties = item.properties
          if (properties.center) {
            geoCoordMap.push(
              { name: properties.name, value: properties.center }
            )
          }
        })
        this.$echarts.registerMap(registerMap, geoJson)

        var data = []
        const option = {
          legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['pm2.5'],
            textStyle: {
              color: '#fff'
            }
          },
          visualMap: {
            show: false,
            min: 0,
            max: 500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
            }
          },

          geo: {
            show: true,
            map: registerMap,
            label: {
              normal: {
                show: true,
                fontWeight: 'bold',
                position: 'inside',
                color: '#000',
                shadowColor: '#26bfec'
              },
              emphasis: {
                show: false
              }
            },
            roam: true

          },
          series: [
            {
              type: 'map',
              geoIndex: 0,
              aspectScale: 0.75, // 长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                normal: {
                  formatter: function(params) {
                    for (const d of data) {
                      if (d.name === params.name) {
                        return '{cnNum|' + d.value + '人}'
                      }
                    }
                  },
                  show: true,
                  color: '#fff',
                  fontWeight: 'bold',
                  position: 'inside',
                  rich: {
                    cnNum: {
                      fontSize: 16,
                      color: '#D4EEFF'
                    }
                  }
                }
              },

              roam: true,
              itemStyle: {
                normal: {
                  areaColor: '#031525',
                  borderColor: '#f00'
                },
                emphasis: {
                  areaColor: '#2B91B7'
                }
              },
              animation: false,
              data: data
            }, {
              name: '定位点',
              data: geoCoordMap,
              type: 'effectScatter',
              coordinateSystem: 'geo',
              showEffectOn: 'render',
              rippleEffect: {
                period: 15,
                scale: 4,
                brushType: 'fill'
              },
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: '#FABC61',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              }
            }
          ]
        }
        this.mapDownEchart.setOption(option)
        this.mapDownEchart.hideLoading()
      }).catch((_) => {
        this.mapDownEchart.hideLoading()
      })
    }

  }
}
</script>
<style scoped>

</style>
